<template>
  <div class="container-pt">
    <van-nav-bar
      fixed
      title="详情"
      @click-left="$router.back()"
      left-arrow
    />
    <div class="content-box">
      <div class="art-tit">{{detaillist.title}}</div>
      <div class="art-desc">
        <span>时间:{{new Date(detaillist.create_date).toLocaleString()}}</span>
        <span>分类：{{detaillist.catename}}</span>
        <span>阅读({{detaillist.click
        }})</span>
      </div>
      <van-divider />
      <div
        class="art-content"
        v-html="detaillist.content"
      >
      </div>
    </div>
    <van-cell>
      <h3
        slot="title"
        class="group-title"
      >相关推荐</h3>
    </van-cell>
    <RecommendList :hotlist="recommend" />
    <van-grid
      clickable
      class="bot"
      :column-num="3"
    >
      <van-grid-item
        :icon="likeO"
        text="收藏"
        @click="action(1)"
      />
      <van-grid-item
        :icon="collectO"
        text="点赞"
        @click="action(2)"
      />
      <van-grid-item
      icon="share-o"
      text="分享"
      @click="showShare = true" 
    />
    </van-grid>
 
<van-share-sheet
  v-model="showShare"
  title="立即分享给好友"
  :options="options"
  @select="onSelect"
/>
  </div>
</template>

<script>
import {dolike} from '@/api/like-collect'
import RecommendList from '../components/recommend-list.vue'
import { getdetail } from '@/api/index.js'
export default {
  name: 'Show',
  data () {
    return {
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
    likeO:'like-o',
    collectO:'thumb-circle-o',
      like:false,
      collect:false,
      detaillist: {},
      recommend: [],
      params:{
        type:'',
        article_id:'',
        action:'add'
      }
    }
  },
  components: { RecommendList },
  async created () {
    console.log(this.$route.query.id)
    const res = await getdetail(this.$route.query.id)
    console.log(res.data.info)
    this.detaillist = res.data.info
    this.recommend = res.data.recommend
    this.like=res.data.info.isLike
    this.likeO=res.data.info.isCollect?'like':'like-o'
    this.collect=res.data.info.isCollect
    this.collectO=res.data.info.isLike?'good-job':'thumb-circle-o'
  },
  methods:{
   async action(type){
    this.params.type=type
    this.params.article_id=this.$route.query.id
    console.log(this.params);
if(type===1&&this.collect===false){
  this.params.action='add'
  this.collect =true
  const res = await dolike(this.params)
    console.log(res);
    this.$toast.success('收藏成功')
    this.likeO='like'
   
}else if(type===1&&this.collect===true){
  this.collect =false
  this.params.action='del'
  await dolike(this.params)
  this.$toast.fail('取消收藏')
  this.likeO='like-o'
}
else if(type===2&&this.like===false){
  this.params.action='add'
  this.like =true
  await dolike(this.params)
  this.$toast.success('点赞成功')
  this.collectO='good-job'
 
}else{
  this.params.action='del'
  this.like =false
  await dolike(this.params)
  this.$toast.fail('取消点赞')
  this.collectO='thumb-circle-o'

}
    },
    onSelect(option) {
      this.$toast(option.name);
      this.showShare = false;
    },
  }
}
</script>
<style scoped lang="less">
.content-box {
  padding: 20px 20px;
}
.art-tit {
  font-size: 36px;
  line-height: 44px;
  margin-bottom: 20px;
}
.art-desc {
  font-size: 28px;
  color: #aaa;
  span {
    margin-right: 20px;
  }
}
.bot {
  position: fixed;
  bottom: 0;
  width: 100%;
}
/deep/ .van-grid-item__content {
  padding: 20px 0;
}
/deep/ .van-grid-item__text {
  margin-top: 0 !important;
}
.group-title {
  color: #1989fa;
}
</style>